<template>
    <h2>构建带箭头连接线</h2>
    <div id="chart-diagram" style="background-color: whitesmoke; width: 1000px; height: 400px;">
    </div>

</template>

<script setup>
    import {onMounted} from 'vue';
    import go from "gojs";

    let myDiagram = null;

    const init = () => {
        const $ = go.GraphObject.make


        let myDiagram = new go.Diagram("chart-diagram", {
            'grid.visible': true, // 显示网格
            'clickCreatingTool.archetypeNodeData': {category: 'Normal', text: '新节点', notice: ''}, // 双击新建节点(可以写入节点的默认信息)；；
            'toolManager.hoverDelay': 100, // tooltip提示显示延时
            'toolManager.toolTipDuration': 10000, // tooltip持续显示时间
            allowMove: true, // 允许拖动画板
            allowDragOut: true, // 允许拖拽节点
            allowDelete: true, // 允许删除节点
            allowCopy: true, // 允许复制节点
            allowClipboard: true, // 允许粘贴节点
            layout: $(go.TreeLayout, {angle: 90, nodeSpacing: 120, layerSpacing: 130})

        });
        myDiagram.nodeTemplate =
            $(go.Node, "Auto",
                $(go.Shape,
                    {
                        figure: "RoundedRectangle",
                        fill: "white"
                    },  // default Shape.fill value
                    new go.Binding("fill", "color")),  // 把数组中的color绑定到Shape的fill上
                $(go.TextBlock,
                    new go.Binding("text", "key"), {margin: 25, width: 100, textAlign: 'center'})  // // 把数组中的key值绑定到TextBlock的text上
            );

        let nodeDataArray = [
            {key: "Alpha1", color: "lightblue"},  // 这边的值会被遍历循环
            {key: "Beta1", color: "pink"},  // 这边的值会被遍历循环
            {key: "node3", color: "yellow"}
        ];

        let linkDataArray = [

            {from: "Alpha1", to: "Beta1",thick:1,color:'red'},
            {from: "Alpha1", to: "node3",thick:3,color:'green'},
        ];
        myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
        myDiagram.linkTemplate =
            $(go.Link,
                {
                    // 链路路由应避开节点
                    routing: go.Link.AvoidsNodes,
                    corner: 10,
                    curve: go.Link.JumpGap
                },
                $(go.Shape,
                    new go.Binding("stroke", "color"),  // shape.stroke = data.color
                    new go.Binding("strokeWidth", "thick")),  // shape.strokeWidth = data.thick
                $(go.Shape,

                    {toArrow: "OpenTriangle", fill: null},
                    new go.Binding("stroke", "color"),  // shape.stroke = data.color
                    new go.Binding("strokeWidth", "thick")),  // shape.strokeWidth = data.thick

            );
        //myDiagram.layout = $(go.TreeLayout, { angle: 90,  nodeSpacing: 120,layerSpacing: 130 });

    };

    onMounted(() => {
        init();
    });


</script>

<style scoped>

</style>